<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
	<style>
		.bar{
			width: 800px;
			height: 500px;
			margin:50px auto;
			background: #cdcdcd;
		}
		.axis path,
		.axis line{
			fill: none;
			stroke: black;
			shape-rendering: optimizeSpeed;
		}
		.axis text{
			font-size: 12px;
			font-family: sans-serif;
		}
	</style>
</head>
<body>
	<div class="bar">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 800;
		var height = 500;
		var padding = {top: 50,right: 50,bottom: 50,left: 50};
		var dataset = [50,30,45,68,79,12,39,52];

		var xAxisWidth = 400;
		var yAxisWidth = 400;

		var center = [[0.5,0.5],[0.7,0.8],[0.4,0.9],[0.11,0.32],[0.88,0.25],[0.75,0.12],[0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7]];

		var color = d3.scale.category20();
		var xScale = d3.scale.linear()
									.domain([0,1.2 * d3.max(center,function(d) {
										return d[0]
									})])
									.range([0,xAxisWidth])

		var yScale = d3.scale.linear()
								.domain([0,1.2 * d3.max(center,function(d) {
									return d[1];
								})])
								.range([0,yAxisWidth])

		var svg = d3.select(".bar").append("svg").attr("width",width).attr("height",height);

		var circle = svg.selectAll("circle").data(center)
										.enter().append("circle")
										.attr("fill",function(d,i) {
											return color(i)
										})
										.attr("cx",function(d) {
											return padding.left + xScale(d[0]);
										})
										.attr("cy",function(d) {
											return height - padding.bottom - yScale(d[1])
										})
										.attr("r",8)
			
			var xAxis = d3.svg.axis()
										.scale(xScale)
										.orient("bottom");

			yScale.range([yAxisWidth,0]);

			var yAxis = d3.svg.axis()
										.scale(yScale)
										.orient("left")
			 svg.append("g")
			 		.attr("class","Xaxis axis")
			 		.attr("transform","translate(" + padding.left + ","+ (height - padding.bottom) +")")
			 		.call(xAxis)

			svg.append("g")
			 		.attr("class","Yaxis axis")
			 		.attr("transform","translate(" + padding.left + ","+ (padding.bottom) +")")
			 		.call(yAxis)

	</script>
</body>
</html>